<template>
	<view class="container">
		<view class="container-c">
			<view class="info">
				<view class="item">
					<text class="left">订单编号:</text><text class="right">{{info.orderSn}}</text>
				</view>
				<view class="item">
					<text class="left">订单金额:</text> <text class="right">{{info.totalPrice}}元</text>
				</view>
				<view class="item type">
					选择支付方式
				</view>
				<radio-group>
					<view class="type-list">
						<view class="left-type">
							<image src="../../../../static/icons/alipay.png" mode=""></image>
							<text>支付宝支付</text>
						</view>
						<view class="right-type">
							<radio checked color="#354e44" value="" />
						</view>
					</view>
					<view class="type-list">
						<view class="left-type">
							<image class="" src="../../../../static/icons/wxpay.png" mode=""></image>
							<text>微信支付</text>
						</view>
						<view class="right-type">
							<radio color="#354e44" value="" />
						</view>
					</view>
				</radio-group>
			</view>
			<button class="btn" @tap="goPayResult" type="default" >立即支付</button>	
			<view class="tips">
				<text class="left">点击立即支付，即代表您同意</text><text class="right">《条款协议》</text>
			</view>
		</view>
	</view>
</template>
<script>
	import {payConfirm,getPreOrderById} from "@/api/list/order/index.js"
	// import {getPreOrderById} from "@/api/list/order/index.js"
	export default {
		data() {
			return {
				info: {}
			};
		},
		onLoad(e) {
			// console.log(e)
			getPreOrderById(e.id).then(res=>{
				console.log(res)
				this.info=res.data.orderItems[0]
			})
		},
		methods:{
			goPayResult(){
				payConfirm({
					orderId:this.info.orderId,
					payType:1
				}).then(res=>{
					// console.log(res)
					if(res.success==false){
						uni.showToast({
							title:"订单状态异常,无法支付!",
							icon:"none"
						})
					}else{
						uni.navigateTo({
							url:"/pages/list/order/confirmOrder/payResult/payResult?price="+this.info.totalPrice
						})
					}
				})
				
			}
		}

	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100%;
		background-color: #f1ece7;
		height: 100vh;
	}

	.container-c {
		width: 650rpx;
		margin: 0 auto;
	}

	.item {
		padding: 20rpx 0;

		.left {
			font-size: 32rpx;
			color: #7d7d7d;
		}
	}

	.type {
		font-size: 34rpx;
	}

	.type-list {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 40rpx;

		.left-type {
			image {
				width: 80rpx;
				height: 80rpx;
				vertical-align: middle;
				margin-right: 20rpx;
			}
		}
	}
	.btn{
		width: 70%;
		    height: 80rpx;
		    border-radius: 80rpx;
		    background-color: #354e44;
		    color: #fff;
		    line-height: 80rpx;
			text-align: center;
		    font-size: 30rpx;
			margin:100rpx auto;
	}
	.tips{
		margin-top: -90rpx;
		font-size: 24rpx;
		text-align: center;
		.right{
			color:#5a9ef7 ;
		}
		.left{
			color: #999;
		}
	}
	
</style>
